/**
  * @Description: 机房编号多选
  * @author zhangxia
  */

<template>
    <view class="wrap">
		<view class="header">
			<view class="cancel" @click="cancel()">取消</view>
			<view>{{title}}</view>
			<view class="confirm" @click="confirm()">确定</view>
		</view>
		<view class="content">
			<view v-for="(item,key) in list" :key="key" :class="{'active':item.isActive}" @click="checkComp(key)">
				{{item.name}}
				<img v-if="item.isActive" src='../../../static/img/check.png' class="checkicon"/>
			</view>
		</view>
	</view>
</template>

<script>
export default {
    name: 'multipleChoicePopup',
    components: {},
    props:{
		title: {
		  type: String,
		  required: true,
		},
		list: {
			type: Array,
			required:true
		}
	},
    data() {
        return {}
    },
    created() {},
    mounted() {
		
	},
    computed: {},
    watch: {},
    methods: {
		checkComp(checkkey){
			this.list.map((item,key)=>{
				if(key == checkkey){
					item.isActive = !item.isActive
				}
				return item;
			})
		},
		confirm(){
			 this.$emit('confirm', this.list.filter(item => item.isActive == true))
		},
		cancel(){
			 this.$emit('cancel', [])
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap{
	height: px2vh(708);
	background: #FFF;
	.header{
		border: px2vh(1) solid #E5E5E5;
		height: px2vh(150);
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: px2vh(42);
		padding: 0 px2vh(60);
		box-sizing: border-box;
		.cancel{
			color: #848484;
		}
		.confirm{
			color: #417ADC;
		}
	}
	.content{
		height: calc(px2vh(708) - #{px2vh(150)});
		text-align: center;
		padding:  px2vh(50);
		box-sizing: border-box;
		view{
			height: px2vh(150);
			line-height: px2vh(150);
			border-bottom: px2vh(1) solid #E5E5E5;
			position: relative;
			.checkicon{
				position: absolute;
				width: px2vh(39);
				height: px2vh(28);
				right: px2vh(20);
				top: px2vh(61);
			}
		}
		view:last-child{
			border: none;
		}
		
		
	}
}
</style>
